/**
 * main.css 管理端总样式文件
 * @author Kayo
 * @date 2016-06-15
 *
 * #reset CSS Reset
 * #common 常用公共样式
 * #frame 外层大框架
 * #welcome 欢迎页
 * #project 项目列表
 * #operation 操作区域
 * #setting 设置界面
 * #about 关于
 * #retina Retina 适配
 */

/* #reset CSS Reset */
body, dl, dd, h1, h2, h3, h4, h5, h6, p, pre, form, fieldset, legend {
    margin: 0;
}

ul, ol, fieldset {
    margin: 0;
    padding: 0;
}

th, td {
    padding: 0;
}

table {
    font-size: inherit;
}

fieldset, img {
    border: none;
}

ul, ol, li {
    list-style: none;
}

body {
    font-size: 14px;
    line-height: 1;
    color: #000;
}

h1, h2, h3, h4 {
    font-size: 18px;
    font-weight: normal;
}

body, input, textarea, select, button {
    outline: none;
    -webkit-text-size-adjust: none;
}

input, textarea, select, button {
    font-size: inherit;
    -webkit-tap-highlight-color: transparent;
}

a {
    color: #4475A7;
    text-decoration: none;
    -webkit-tap-highlight-color: #4475A7;
}

:focus {
    outline: none;
}

/* #html5 HTML5 元素的支持 */
article, aside, details,
figcaption, figure,
footer, header, hgroup,
main, nav, section,
summary {
    display: block;
}

audio, canvas, video {
    display: inline-block;
}

/* #common 常用公共样式 */
.qw_hide {
    display: none !important;
}

.qw_clear:after {
    clear: both;
    content: ".";
    display: block;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
    overflow: hidden;
}

.qw_icon {
    display: inline-block;
    font-size: 0;
    background-repeat: no-repeat;
    background-size: 100%;
}

.qw_icon_Add,
.qw_icon_Remove,
.qw_icon_Setting {
    height: 32px;
    width: 32px;
}

.qw_icon_Add {
    background-image: url(../images/icon_add.png);
}

.qw_icon_Remove {
    background-image: url(../images/icon_remove.png);
}

.qw_icon_Setting {
    background-image: url(../images/icon_preference.png);
}

.qw_icon_WelcomeLogo {
    width: 160px;
    height: 216px;
    background-image: url(../images/welcome_logo.png);
}

.qw_icon_Logo {
    height: 80px;
    width: 80px;
    background-image: url(../images/logo.png);
}

.qw_icon_Folder {
    width: 32px;
    height: 32px;
    background-image: url(../images/icon_folder.png);
}

.qw_label {
    font-size: 14px;
    line-height: 1.5;
}

.qw_checkbox {
    width: 12px;
    height: 12px;
    margin: 0;
}

.qw_label .qw_checkbox {
    margin-right: 4px;
    vertical-align: 1px;
}

.qw_label span {
    vertical-align: top;
}

/* #frame 外层大框架 */
html {
    height: 100%;
}

.frame_wrap {
    position: relative;
    height: 100%;
    padding-bottom: 292px;
    background-color: #fff;
    font-family: "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", sans-serif;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

.frame_statusBar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    padding: 7px 10px 7px 7px;
    box-sizing: border-box;
    -webkit-app-region: drag;
}

.frame_statusBar_inner {
    display: inline-block;
}

.frame_statusBar:after {
    clear: both;
    content: ".";
    display: block;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
    overflow: hidden;
}

.frame_statusBar_btn {
    -webkit-app-region: no-drag;
    padding: 3px;
}

.frame_statusBar_btn_icon {
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.qw_macOS .frame_statusBar_btn {
    float: left;
    margin-right: 2px;
}

.qw_macOS .frame_statusBar_btn_icon {
    height: 12px;
    width: 12px;
    border-radius: 50%;
}

.qw_macOS .frame_statusBar_btn_Close .frame_statusBar_btn_icon {
    background-color: #FE6057;
}

.qw_macOS .frame_statusBar_btn_Close.frame_statusBar_btn_Hover .frame_statusBar_btn_icon {
    background-image: url(../images/icon_close_mac.png);
}

.qw_macOS .frame_statusBar_btn_Close:active .frame_statusBar_btn_icon {
    background-color: #BF4743;
}

.qw_macOS .frame_statusBar_btn_Min .frame_statusBar_btn_icon {
    background-color: #FFBD2E;
}

.qw_macOS .frame_statusBar_btn_Min.frame_statusBar_btn_Hover .frame_statusBar_btn_icon {
    background-image: url(../images/icon_minimize_mac.png);
}

.qw_macOS .frame_statusBar_btn_Min:active .frame_statusBar_btn_icon {
    background-color: #BF8D1E;
}

.qw_macOS .frame_statusBar_btn_Max .frame_statusBar_btn_icon {
    background-color: #28C940;
}

.qw_macOS .frame_statusBar_btn_Max.frame_statusBar_btn_Hover .frame_statusBar_btn_icon {
    background-image: url(../images/icon_fullscreen_mac.png);
}

.qw_macOS .frame_statusBar_btn_Max:active .frame_statusBar_btn_icon {
    background-color: #1C952C;
}

.qw_macOS .frame_statusBar_btn_Unmax.frame_statusBar_btn_Hover .frame_statusBar_btn_icon {
    background-image: url(../images/icon_restore_mac.png);
}

.qw_windows .frame_statusBar_inner {
    float: right;
}

.qw_windows .frame_statusBar_btn {
    float: right;
    margin-left: 20px;
}

.qw_windows .frame_statusBar_btn_icon {
    display: block;
    height: 12px;
    width: 12px;
}

.qw_windows .frame_statusBar_btn_Close .frame_statusBar_btn_icon {
    background-image: url(../images/icon_close.png);
}

.qw_windows .frame_statusBar_btn_Close:hover .frame_statusBar_btn_icon {
    background-image: url(../images/icon_close_hover.png);
}

.qw_windows .frame_statusBar_btn_Close:active .frame_statusBar_btn_icon {
    background-image: url(../images/icon_close_active.png);
}

.qw_windows .frame_statusBar_btn_Min .frame_statusBar_btn_icon {
    background-image: url(../images/icon_minimize.png);
}

.qw_windows .frame_statusBar_btn_Min:hover .frame_statusBar_btn_icon {
    background-image: url(../images/icon_minimize_hover.png);
}

.qw_windows .frame_statusBar_btn_Min:active .frame_statusBar_btn_icon {
    background-image: url(../images/icon_minimize_active.png);
}

.qw_windows .frame_statusBar_btn_Max .frame_statusBar_btn_icon {
    background-image: url(../images/icon_maximize.png);
}

.qw_windows .frame_statusBar_btn_Max:hover .frame_statusBar_btn_icon {
    background-image: url(../images/icon_maximize_hover.png);
}

.qw_windows .frame_statusBar_btn_Max:active .frame_statusBar_btn_icon {
    background-image: url(../images/icon_maximize_active.png);
}

.qw_windows .frame_statusBar_btn_Unmax .frame_statusBar_btn_icon {
    background-image: url(../images/icon_restore.png);
}

.qw_windows .frame_statusBar_btn_Unmax:hover .frame_statusBar_btn_icon {
    background-image: url(../images/icon_restore_hover.png);
}

.qw_windows .frame_statusBar_btn_Unmax:active .frame_statusBar_btn_icon {
    background-image: url(../images/icon_restore_active.png);
}

.frame_toolbar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 10px 12px 12px;
    box-sizing: border-box;
    border-top: 1px solid #DEE0E2;
}

.frame_toolbar_btn {
    float: right;
    height: 32px;
    margin-right: 8px;
    padding: 0 8px;
    border: 1px solid #00A3E1;
    border-radius: 4px;
    line-height: 32px;
    text-align: center;
    color: #00A3E1;
    font-size: 13px;
    box-sizing: border-box;
}

.frame_toolbar_btn:hover {
    background-color: #00A3E1;
    color: #fff;
}

.frame_toolbar_btn:active {
    border-color: #0094CD;
    background-color: #0094CD;
}

.frame_toolbar_btn_Watching {
    border-color: #3ECE5A;
    color: #3ECE5A;
}

.frame_toolbar_btn_Watching:hover {
    background-color: #3ECE5A;
    color: #fff;
}

.frame_toolbar_btn_Watching:active {
    background-color: #1CB83A;
    border-color: #1CB83A;
}

.frame_toolbar_btn_Disabled {
    opacity: .5;
}

.frame_toolbar_btn_Disabled:hover,
.frame_toolbar_btn_Disabled:active {
    background-color: transparent;
    border: 1px solid #00A3E1;
    color: #00A3E1;
}

.frame_toolbar_btn_Install,
.frame_toolbar_btn_Gulp {
    margin-right: 0;
}

.frame_toolbar_btn_Gulp {
    width: 105px;
}

.frame_toolbar_item {
    float: left;
    margin-right: 2px;
}

.frame_toolbar_item:last-child {
    margin-right: 0;
}

.frame_toolbar_item:hover .qw_icon_Add {
    background-image: url(../images/icon_add_hover.png);
}

.frame_toolbar_item:active .qw_icon_Add {
    background-image: url(../images/icon_add_active.png);
}

.frame_toolbar_item:hover .qw_icon_Remove {
    background-image: url(../images/icon_remove_hover.png);
}

.frame_toolbar_item:active .qw_icon_Remove {
    background-image: url(../images/icon_remove_active.png);
}

.frame_toolbar_item:hover .qw_icon_Setting {
    background-image: url(../images/icon_preference_hover.png);
}

.frame_toolbar_item:active .qw_icon_Setting {
    background-image: url(../images/icon_preference_active.png);
}

.frame_toolbar_item_OpenProject {
    position: relative;
    overflow: hidden;
}

.frame_toolbar_item_openProjectIpt {
    position: absolute;
    top: 0;
    right: 0;
    width: 1000%;
    height: 1000%;
    opacity: 0;
}

.frame_toolbar_item_openProjectText {
    display: none;
    color: #858C96;
}

.frame_toolbar_item:hover .frame_toolbar_item_openProjectText {
    color: #ADB4BE;
}

.frame_toolbar_item:active .frame_toolbar_item_openProjectText {
    color: #5D646E;
}

.frame_toolbar_EmptyProject {
    border-top: none;
}

.frame_toolbar_EmptyProject .frame_toolbar_item_openProjectText {
    display: inline-block;
    vertical-align: top;
    margin-top: 9px;
}

.frame_toolbar_EmptyProject .frame_toolbar_item_DelProject,
.frame_toolbar_EmptyProject .frame_toolbar_item_Setting,
.frame_toolbar_EmptyProject .frame_toolbar_btn {
    display: none;
}

.frame_wrap_Draging {
    border: 1px solid #3398d2;
}

.frame_wrap_About {
    padding-bottom: 30px;
}

/* #welcome 欢迎页 */
.welcome_stage {
    padding: 100px 0 40px;
    text-align: center;
}

.welcome_stage_title {
    margin-bottom: 8px;
    line-height: 200;
    font-size: 0;
}

.welcome_stage_desc {
    color: #858C96;
    font-size: 14px;
    line-height: 24px;
}

/* #project 项目列表 */
.project_stage {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 336px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 45px;
    background-image: linear-gradient(to bottom, #00A3E1, #05CAE8 100%);
    background-repeat: repeat-x;
    box-sizing: border-box;
    overflow-y: auto;
}

.project_stage_title {
    flex-shrink: 0;
    margin-bottom: 18px;
    padding: 0 16px;
    font-size: 20px;
    color: #fff;
}

.project_stage_list {
    flex-grow: 1;
    max-height: 100%;
    overflow-y: auto;
}

.project_stage_cnt {
    overflow: hidden;
}

.project_stage_item {
    position: relative;
    padding: 7px 74px 9px 32px;
    cursor: pointer;
}

.project_stage_item:hover {
    background-color: rgba(255, 255, 255, .15);
}

.project_stage_item .qw_icon {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -16px;
}

.project_stage_item .qw_icon:active {
    opacity: .5;
}

.project_stage_item_title {
    margin-bottom: 7px;
    color: #fff;
    font-size: 18px;
}

.project_stage_item_path {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: rgba(255, 255, 255, .75);
    font-size: 12px;
}

.project_stage_item_Watching:before {
    content: ".";
    position: absolute;
    left: 13px;
    top: 50%;
    display: block;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background-color: #fff;
    font-size: 0;
    border-radius: 50%;
}

.project_stage_item_Current {
    background-color: rgba(255, 255, 255, .3);
}

.project_stage_item_Current:hover {
    background-color: rgba(255, 255, 255, .3);
}

/* #operation 操作区域 */
.operation_stage {
    position: absolute;
    bottom: 57px;
    left: 0;
    display: flex;
    width: 100%;
    height: 280px;
    padding-top: 24px;
    box-sizing: border-box;
    text-align: center;
}

.operation_stage_mask {
    position: absolute;
    left: 0;
    top: 24px;
    height: 32px;
    width: 100%;
    background-image: linear-gradient(to bottom, #fff, transparent 100%);
    background-repeat: repeat-x;
}

.operation_stage_clearLogBtn {
    position: absolute;
    top: 14px;
    right: 12px;
    color: #858C96;
    font-size: 13px;
}

.operation_stage_clearLogBtn:hover {
    color: #ADB4BE;
}

.operation_stage_clearLogBtn:active {
    color: #5D646E;
}

.operation_stage_log {
    width: 100%;
    padding: 12px 24px 22px;
    text-align: left;
    overflow: auto;
    color: #595959;
    word-break: break-word;
    word-wrap: break-word;
    line-height: 22px;
    box-sizing: border-box;
    -webkit-user-select: auto;
    user-select: auto;
}

.operation_stage_log_time {
    color: #858C96;
}

.operation_stage_log_keyword {
    color: #00A3E1;
}

.operation_stage_log_qmui {
    color: #00A3E1;
}

/* #setting 设置界面 */
.setting_panelMask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
}

.setting_panel {
    position: absolute;
    left: 76px;
    bottom: 48px;
    z-index: 100;
    padding: 18px 16px 16px;
    background-color: #fff;
    border: 1px solid #DEE0E2;
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .15);
}

.setting_panel_title {
    margin-bottom: 15px;
    font-size: 16px;
    color: #858C96;
}

.setting_panel_item {
    font-size: 14px;
    margin-top: 12px;
    color: #353C46;
}

.setting_panel_item:first-child {
    margin-top: 0;
}

/* #about 关于 */
.about_stage {
    padding: 30px;
    text-align: center;
}

.about_stage .qw_icon_Logo {
    margin-bottom: 20px;
}

.about_stage_title {
    margin-bottom: 10px;
    font-size: 24px;
    color: #00A3E1;
}

.about_stage_version {
    margin-bottom: 14px;
    font-size: 12px;
    color: #a0a0a0;
}

.about_stage_desc {
    color: #595959;
}

/* #retina Retina 适配 */
@media (-webkit-min-device-pixel-ratio: 2),(min--moz-device-pixel-ratio: 2),(-o-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2),(min-resolution: 2dppx),(min-resolution: 192dpi) {
    .qw_macOS .frame_statusBar_btn_Close.frame_statusBar_btn_Hover .frame_statusBar_btn_icon {
        background-image: url(../images/icon_close_mac_2x.png);
    }

    .qw_macOS .frame_statusBar_btn_Min.frame_statusBar_btn_Hover .frame_statusBar_btn_icon {
        background-image: url(../images/icon_minimize_mac_2x.png);
    }

    .qw_macOS .frame_statusBar_btn_Max.frame_statusBar_btn_Hover .frame_statusBar_btn_icon {
        background-image: url(../images/icon_fullscreen_mac_2x.png);
    }

    .qw_macOS .frame_statusBar_btn_Unmax.frame_statusBar_btn_Hover .frame_statusBar_btn_icon {
        background-image: url(../images/icon_restore_mac_2x.png);
    }

    .qw_windows .frame_statusBar_btn_Close .frame_statusBar_btn_icon {
        background-image: url(../images/icon_close_2x.png);
    }

    .qw_windows .frame_statusBar_btn_Close:hover .frame_statusBar_btn_icon {
        background-image: url(../images/icon_close_hover_2x.png);
    }

    .qw_windows .frame_statusBar_btn_Close:active .frame_statusBar_btn_icon {
        background-image: url(../images/icon_close_active_2x.png);
    }

    .qw_windows .frame_statusBar_btn_Min .frame_statusBar_btn_icon {
        background-image: url(../images/icon_minimize_2x.png);
    }

    .qw_windows .frame_statusBar_btn_Min:hover .frame_statusBar_btn_icon {
        background-image: url(../images/icon_minimize_hover_2x.png);
    }

    .qw_windows .frame_statusBar_btn_Min:active .frame_statusBar_btn_icon {
        background-image: url(../images/icon_minimize_active_2x.png);
    }

    .qw_windows .frame_statusBar_btn_Max .frame_statusBar_btn_icon {
        background-image: url(../images/icon_maximize_2x.png);
    }

    .qw_windows .frame_statusBar_btn_Max:hover .frame_statusBar_btn_icon {
        background-image: url(../images/icon_maximize_hover_2x.png);
    }

    .qw_windows .frame_statusBar_btn_Max:active .frame_statusBar_btn_icon {
        background-image: url(../images/icon_maximize_active_2x.png);
    }

    .qw_windows .frame_statusBar_btn_Unmax .frame_statusBar_btn_icon {
        background-image: url(../images/icon_restore_2x.png);
    }

    .qw_windows .frame_statusBar_btn_Unmax:hover .frame_statusBar_btn_icon {
        background-image: url(../images/icon_restore_hover_2x.png);
    }

    .qw_windows .frame_statusBar_btn_Unmax:active .frame_statusBar_btn_icon {
        background-image: url(../images/icon_restore_active_2x.png);
    }

    .qw_icon_Add {
        background-image: url(../images/icon_add_2x.png);
    }

    .frame_toolbar_item:hover .qw_icon_Add {
        background-image: url(../images/icon_add_hover_2x.png);
    }

    .frame_toolbar_item:active .qw_icon_Add {
        background-image: url(../images/icon_add_active_2x.png);
    }

    .qw_icon_Remove {
        background-image: url(../images/icon_remove_2x.png);
    }

    .frame_toolbar_item:hover .qw_icon_Remove {
        background-image: url(../images/icon_remove_hover_2x.png);
    }

    .frame_toolbar_item:active .qw_icon_Remove {
        background-image: url(../images/icon_remove_active_2x.png);
    }

    .qw_icon_Setting {
        background-image: url(../images/icon_preference_2x.png);
    }

    .frame_toolbar_item:hover .qw_icon_Setting {
        background-image: url(../images/icon_preference_hover_2x.png);
    }

    .frame_toolbar_item:active .qw_icon_Setting {
        background-image: url(../images/icon_preference_active_2x.png);
    }

    .qw_icon_Folder {
        background-image: url(../images/icon_folder_2x.png);
    }

    .qw_icon_Logo {
        background-image: url(../images/logo_2x.png);
    }

    .qw_icon_WelcomeLogo {
        background-image: url(../images/welcome_logo_2x.png);
    }
}
